<template>
  <div class="top">
    <div class="main">
<!--    <div style="height: 200px;background-color: #55a532">-->
<!--      这是帖子内容{{ this.invitation.inviContent }}-->
<!--    </div>-->
    <div class="inviContentDetail" >
      <div>
      <h1>
<!--        {{this.invitation.inviTitle}}-->
        <span v-for="(item,index)  in this.invitation.topics" v-bind:key="index">
          <span class="invitationTopic" style="color: #2D64B3" @click="showTopicInfo(item)">#{{item.topicName}}# </span>
          </span>
        {{invitation.inviTitle}}
        <el-button type="danger" icon="el-icon-delete" circle class="dele" @click="deleteInvitation()" ></el-button>
      </h1>
      </div>
      <el-row class="mainContent" >
        <el-col :span="2">
          <div>
            <el-avatar  :size="60" :src="invitation.schoolUser.headPortrait " ></el-avatar>
            <div class="inviUsername">{{ invitation.schoolUser.nickname }}</div>
          </div>
        </el-col>
        <el-col :span="22">
          <div>
            <div class="inviContent">
<!--              遇见你是故事的开始，-->
<!--              走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，-->
<!--              走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始-->
<!--              ，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，-->
<!--              走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，-->
<!--              走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，-->
<!--              走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，-->
<!--              走到底是余生的欢喜遇见你是故事的开始-->
<!--              ，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜-->
<!--              遇见你是故事的开始，走到底是余生的欢喜-->
<!--              遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜-->
<!--              遇见你是故事的开始，走到底是余生的欢喜遇见你是故事的开始，走到底是余生的欢喜-->
              {{invitation.inviContent}}
            </div>
            <!--      <div v-for="item in this.invitation.inviPic" v-bind:key="item">-->
            <!--       <-->
            <!--      </div>-->
            <div class="container">
              <el-image v-for="(item,index)  in invitation.picUrlList" v-bind:key="index" :src="item" lazy ></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
      </div>
      <!-- 查看帖子详情对话框 -->
      <el-dialog   :visible.sync="disabled" @close="handClose()"  width="800px" :append-to-body="true" :estroy-on-close="true">
        <div class="userInfoHeader">
          <el-avatar class="userIcon" :size="50" :src="topicInfo.topicIcon"></el-avatar>
          <div class="nickname_signature">
            <div class="userNickname"> #{{ topicInfo.topicName}}#</div>
            <div class="userSignature" style="margin-bottom: 10px">话题描述：{{ topicInfo.topicDescr }}</div>
            话题发帖数<i class="iconfont icon-tiezi"> {{topicInfo.inviNum}}</i>
          </div>
          <div class="time">
            <div class="createTime">话题创建时间：{{ topicInfo.createTime }}</div>
            <div class="updateTime">最近更新时间：{{ topicInfo.updateTime }}</div>
          </div>
        </div>
        <div class="userInfoMain">
          <el-tabs class="invitation" type="border-card">
            <el-tab-pane label="帖子">
              <div class="content" v-if="this.invitationListTopic.length>0">
                <div class="invitationContent" v-for="(item,index)  in invitationListTopic" v-bind:key="index">
                  <div class="Col_left" @click="getInvitationInfoDetail(item.inviId)">
                    <span class="threadlist_rep_num center_text" title="回复" >{{ item.commentNum }}</span>
                  </div>
                  <div class="Col_mid">
                    <div class="Col_mid_top">
        <span class="Col_mid_top_title">

<!--          <span v-for="(item2,index)  in item.topics" v-bind:key="index">-->
          <!--            <span class="invitationTopic">#{{item2.topicName}}# </span>-->
          <!--          </span>-->
         <span class="inviTitle" @click="getInvitationInfoDetail(item.inviId)">
           {{item.inviTitle}}
         </span>
        </span>
                    </div>
                    <div class="Col_mid_under">
                      <div class="Col_mid_under_invitationContent" @click="getInvitationInfoDetail(item.inviId)">
                        {{item.inviContent}}
                      </div>
                      <!--        <div class="Col_mid_under_pic"></div>-->
                      <div class="Col_mid_under_mid">
                        <div class="Col_mid_under_right_zan">
                          <i class="iconfont icon-dianzan">  {{item.agreeNum}}</i><br/>
                          <i class="iconfont icon-liulan">  {{item.browseNum}}</i>
                        </div>
                      </div>
                      <div class="Col_mid_under_right">
                        <span class="Col_mid_under_right_time">{{item.createTime}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="Col_right">
                    <el-tooltip effect="dark" class="deleteInvitation" content="删除帖子" placement="top" :enterable="false"> <!-- 鼠标放上去提示文字 enterable鼠标不可以进入到提示文字 即自动隐藏 -->
                      <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTopic(item.inviId)"></el-button>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="tipsNoInvitation" v-else>该话题暂无帖子讨论</div>
              <div class="page">
                <el-pagination
                  @current-change="handleUserInvitationPageCurrentChange"
                  :current-page.sync="things2.page"
                  :page-size="4"
                  layout="total, prev, pager, next"
                  :total="invitationSize">
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    <div id="common">
      <div id="b-head" style="margin-bottom: 20px">
        <span class="conmentNumber">{{ this.invitation.commentNum }}</span>
        <span class="conment_" style="font-size: 18px">评论</span>
      </div>
      <div class="comment-header clearfix" style="margin-left: 80px;">
        <el-radio v-model="radio" label="1" @change="getComment()">按热度排序</el-radio>
        <el-radio v-model="radio" label="2" @change="getComment()">按时间排序</el-radio>
      </div>
      <el-divider></el-divider>
      <div id="commentList" v-for="(item,index)  in commentList" v-bind:key="index">
<!--        //用户头像-->
        <div class="avatar">
          <el-avatar :size="60" :src="item.user.headPortrait" class="avatar_head"></el-avatar>
        </div>
        <div class="commment">
          <span class="username">{{ item.user.nickname }}</span>
          <div >
          <div class="commmentContent" v-if="item.deleted === false ">{{item.comContent}}</div>
            <div class="commmentContent" v-else style="color: #6D757A;size: 10px;text-decoration : line-through">该评论已被删除</div>
<!--            <div class="delete">删除</div>-->
          </div>
          <div class="bottom">
          <div class="time1">{{item.createTime}}</div>
            <i class="iconfont icon-dianzan" style="color: #9AA2AB;margin-left: 10px">  {{item.agreeNum}}</i>
<!--            <div class="reply">共6条回复, 点击查看</div>-->
          <span class="delete" @click="deleteFirstCom(item)">删除</span>
          </div>
          <div class="replyList">
<!--            回复内容-->
<!--            <tr class="replyInfo" v-for="(item2,index)  in item.secondComment" v-bind:key="index" >-->
<!--            <el-avatar :size="30" style="margin: 0;vertical-align:middle" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F01%2F1533143046-IDiXyEtckL.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639137079&t=66a2f59fb041a46c15ac51bc7f922386" class="avatar_head"></el-avatar>-->
<!--            <span class="replyUsername">{{item2.user.nickname}}</span>-->
<!--              <span v-if="item.user.userId !== item2.comUser.userId">-->
<!--              <span class="tips" >回复</span>-->
<!--              <span class="replyUsername">{{item2.comUser.nickname}}</span>-->
<!--              </span>-->
<!--            <span class="replyContent">{{item2.comContent}}</span>-->
<!--            <div>-->
<!--              <span class="time" style="margin-left: 40px;margin-bottom: 10px">2021-11-08 22:25</span>-->
<!--              <span><i class="iconfont icon-dianzan" style="color: #9AA2AB;margin-left: 10px">  {{item2.agreeNum}}</i></span>-->
<!--              <span class="delete" @click="deleteSecondCom(item2)">删除</span>-->
<!--            </div>-->
<!--          </tr>-->
            <tr class="replyInfo" v-for="(item2,index) in item.secondComment" v-bind:key="index+1" >
              <el-avatar :size="30" style="margin: 0;vertical-align:middle" :src="item2.user.headPortrait" class="avatar_head"></el-avatar>
              <span class="replyUsername">{{item2.user.nickname}}</span>
              <span v-if="item2.comUser!== null && item.user.userId === item2.comUser.userId">
              <span class="tips" >回复</span>
              <span class="replyUsername">{{item2.comUser.nickname}}</span>
              </span>
              <span v-if="item2.comUser!== null && item.user.userId !== item2.comUser.userId">
              <span class="tips" >回复</span>
              <span class="replyUsername">{{item2.comUser.nickname}}</span>
              </span>
              <span class="replyContent" v-if="item2.deleted === false">{{item2.comContent}}</span>
              <span class="replyContent" v-else style="color: #6D757A;size: 10px;text-decoration : line-through">该回复已被删除</span>
              <div>
                <span class="time1" style="margin-left: 40px">2021-11-08 22:25</span>
                <span><i class="iconfont icon-dianzan" style="color: #9AA2AB;margin-left: 10px">  {{item2.agreeNum}}</i></span>
                              <span class="delete" @click="deleteSecondCom(item2)">删除</span>
              </div>
            </tr>

            </div>
          <el-divider></el-divider>

        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      disabled: false,
      query: {
        agreeNum: -1,
        browseNum: -1,
        buildId: -1,
        commentNum: -1,
        inviContent: '',
        inviTitle: '',
        page: 1,
        pageSize: 5,
        sortOrder: '',
        topicList: '',
        userId: -1
      },
      invitation: {
        agreeNum: 0,
        browseNum: 0,
        build: {},
        buildId: -1,
        commentNum: 0,
        createTime: '',
        deleted: false,
        firstComment: null,
        inviContent: '',
        inviId: -1,
        inviPic: '',
        inviTitle: '',
        page: 0,
        pageSize: 0,
        picUrlList: [],
        schoolUser: {},
        sortOrder: null,
        topics: [],
        updateTime: '',
        userId: 1
      },
      commentList: [],
      radio: '1',
      urls: [],
      firstComment: {
        firstId: 0,
        userId: 0,
        inviId: 0
      },
      secondComment: {
        secondId: 0,
        firstId: 0,
        userId: 0,
        inviId: 0,
        comUserId: 0
      },
      tempUrl: 'agree_num',
      topicInfo: {
        createTime: '',
        page: 1,
        pageSize: 10,
        sortOrder: '',
        topicDescr: '',
        topicIcon: '',
        topicId: -1,
        topicName: '',
        updateTime: '',
        version: -1
      },
      things2: {
        page: 1,
        pageSize: 4,
        sortOrder: 'topic_list',
        thing: '1'
      },
      invitationListTopic: [],
      invitationSize: 0
    }
  },
  mounted () {
    this.query.inviId = this.$route.query.inviId
    this.getInvitationDetail()
    this.changeBread()
    this.getComment()
    // console.log(1)
    // console.log(this.commentList)
    // console.log(2)
  },
  methods: {
    async getComment () {
      if (this.radio === '1') { this.tempUrl = 'agree_num' } else {
        this.tempUrl = 'create_Time'
      }
      const { data: res } = await this.$http.get(`firstComment/getComment/${this.query.inviId}/${this.tempUrl}`)// 目前只有1有评论
      // console.log(res)
      this.commentList = res.data
      this.total = res.data.total
      // console.log('lwy')
    },
    async getInvitationDetail () {
      console.log(this.invitation)
      const { data: res } = await this.$http.post('invitation/selectInviteByAccurate/', this.query)
      if (res.status !== 200) {
        return this.$message.error('查看帖子详情失败！')
      }
      this.invitation = res.data.list[0]
      console.log(this.invitation)
    },
    // 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = '帖子列表'
      document.getElementById('second').innerHTML = '帖子详情'
      document.getElementById('separate_1').innerHTML = '/'
      document.getElementById('separate_2').innerHTML = '/'
    },
    async deleteInvitation () {
      // alert(this.invitation.inviId)
      this.$confirm('此操作将永久删除该帖子, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.get('invitation/deleteInvite/' + this.invitation.inviId)
        if (res.status === 200) {
          await this.$router.push('/invitations')
          return this.success.error('删除成功！')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async deleteFirstCom (item) {
      const { data: res } = await this.$http.post('firstComment/deleteFirstComment/', item) // 目前只有1有评论
      // console.log(res)
      if (res.status === 200) {
        this.getComment()
        return this.$message.success('删除成功！')
      }
    },
    async deleteSecondCom (item) {
      const { data: res } = await this.$http.post('secondComment/deleteSecondComment/', item) // 目前只有1有评论
      if (res.status === 200) {
        this.getComment()
        return this.$message.success('删除成功！')
      }
    },
    showTopicInfo (item) {
      this.topicInfo = item
      this.disabled = true
      this.getTopicInvitation2(item.topicId)
    },
    handleUserInvitationPageCurrentChange (newPage) {
      this.things2.page = newPage
      this.getTopicInvitation2()
    },
    async getTopicInvitation2 (topicId) {
      // this.dataInvitation = []
      // alert(1)
      this.things2.thing = this.topicInfo.topicId
      // this.Invitation.pageSize = 4
      const { data: res } = await this.$http.post('topic/selectInviteByTopic', this.things2)
      console.log(res)
      this.invitationListTopic = res.data.list
      this.invitationSize = res.data.total
    },
    handClose () {
      this.disabled = false
    },
    async deleteTopic (id) {
      const { data: res } = await this.$http.get(`invitation/deleteInvite/${id}`)
      if (res.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      this.getTopicInvitation2()
    },
    getInvitationInfoDetail (id) {
      this.$router.push({
        path: '/invitations/content/',
        component: 'invitationContent',
        query: {
          inviId: id
        }
      })
      this.$router.go(0)
    }
  }
}
</script>

<style scoped>
@import "../../assets/css/topicDialog.css";
.conmentNumber {
  margin-right: 10px;
  font-size: 18px;
  margin-left: 80px;
}
#commentList{
  margin-right: 80px;
  margin-left: 80px;
  width: 900px;
}
.avatar{
  height: auto;
  width: 10%;
  float: left;
}
.avatar_head{
  margin-left: 15px;
  margin-top: 10px;
}
.commment{
    height: auto;
    width: 90%;
    float: left;
}
.username{
  color: #6D757A;
  font-size: 12px;
}
.time1{
  color:#9AA2AB ;
  font-size: 12px;
  float: left;
  margin-top: 4px;
}
.commmentContent{
  margin-top: 10px;
  margin-bottom: 6px;

}
.delete{
  float: right;
  font-size: 13px;
  color: red;
}
.delete:hover{
  cursor: pointer;
}
.replyList{
margin-top: 10px;
}
.replyInfo{
  padding: 0;
  /*vertical-align: middle;*/
}
.replyUsername{
  font-size: 12px;
  color:#6D757A;
  margin-left: 10px;
  /*vertical-align: middle;*/
}
.tips,.replyContent{
  font-size: 13px;
  margin-left: 15px;
}
.inviContentDetail{
  margin-left: 80px;
  width: 1000px;
}
.inviContentDetail h1{
  margin-top: 0;margin-bottom: 20px
}
.dele{
  vertical-align: middle;float: right
}
.mainContent{
  margin-bottom: 20px
}
.inviUsername{
  font-size: 12px;
  overflow: hidden;
  text-overflow:ellipsis;
  width: 80px;
  white-space: nowrap;/*内容超宽后禁止换行显示*/
}
.inviContent{
  height: auto;
  font-size: 20px;
  margin-bottom: 20px
}
.main{
  /*position: absolute;*/
  /*height: 100vh;*/
  width: 1100px;
  margin: auto;
  background-color: white;
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/

}
.top{
  height: auto;
  background-color: #F7F7F7;
}
.invitationTopic:hover{
  text-decoration:underline;
  cursor: pointer;
}
</style>
